<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>课程介绍</title>
	</head>
	<body class="classintro">
		<!-- 视频 -->
		<div class="videobox">
			<video src="#" id="video" controls></video>
			<span id="backbtn">&lt;</span>
			<p class="playbtn">
				<i class="iconfont icon-continue" id="continueBtn"></i>
				视频预览
			</p>
			<p class="pausebtn">
				<i class="iconfont icon-continue" id="continueBtn"></i>
				继续播放
			</p>
		</div>
		<main>
			<!-- 视频介绍 -->
			<section class="title">
				<h2>巧克力</h2>
				<div id="titData">
					<p><span class="num1">45</span> <span>千卡</span></p>
					<p class="second-data">
						<span class="num2">15</span><span>分钟</span>
					</p>
					<p>
						<span class="num3">99.99w</span>人练过<span class="symbol"
							>&gt;</span
						>
					</p>
				</div>
			</section>
			<!-- 课程介绍 -->
			<section class="content">
				<div class="author">
					<img
						src="../../assets/images/avatar1.webp"
						alt=""
						style="width: 100px"
					/>
					<p class="author-name">
						<strong id="name">用户名</strong> <span id="sign">三线达人</span>
					</p>
					<button type="button" id="attBtn">+关注</button>
				</div>
				<div class="wrap">
					<input type="checkbox" name="" id="state" />
					<label for="state" class="textbtn">&emsp;</label>
					<p id="desc" class="clamp text">15分钟....</p>
				</div>
			</section>
			<!-- 练习数据 -->
			<section class="pradata">
				<!-- 练习频次 -->
				<div class="data1">
					<i class="iconfont icon-data"></i>
					<h4>练习频次 <span>每周3-5次</span></h4>
				</div>
				<!-- 器械 -->
				<div class="data2">
					<h4><i class="iconfont icon-barbell"></i>器械</h4>
					<p>无</p>
				</div>
			</section>
		</main>
		<footer>
			<a href="sport_course_play.html" id="startBtn">开始训练</a>
		</footer>
	</body>
</html>
